<template>
  <div class="wrap">
    <van-nav-bar
      title="我的带教"
      placeholder
      fixed
      left-arrow
      style="background: #fff"
    />
    <div class="wrap_cont">
      <DjCard
        :data="item"
        v-for="(item, i) in djList"
        :key="i"
        @click-item="toDetail"
      ></DjCard>
    </div>
    <FooterButton
      type="two"
      title="扫描学员"
      color="linear-gradient(to right,#1BCD74,#1CA893)"
      title1="扫描导师"
      color1="linear-gradient(to right,#1BCD74,#1CA893)"
      class="footer"
    >
      <div class="ewm" @click="clickEwm">
        <img src="@img/ewm.png" alt="" /><span>二维码</span>
      </div>
    </FooterButton>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DjCard from "@/components/dj-card.vue";
import FooterButton from "@/components/FooterButton.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const getImg = (name) => {
  return `/src/assets/images/${name}.png`;
};
// 二维码
const clickEwm = () => {
  router.push({
    path: "/may-ewm",
  });
};
// 我的带教
const toDetail = () => {
  // router.push({
  //   path: "/teaching-evaluation",
  // });
};
const djList = [
  {
    img: getImg("bgtx"),
    name: "陈小艺",
    subName: "带教计划验证",
    value: "未完成",
    type: "1",
  },
  {
    img: getImg("bgtx"),
    name: "陈小艺",
    subName: "带教计划验证",
    value: "已完成",
    type: "2",
  },
];
</script>

<style lang="scss" scoped>
.wrap {
  background: #f5f9fc;
  min-height: 100vh;
  &_cont {
    padding: 13px 16px;
  }
  .ewm {
    width: 150px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #3c3c3c;
    margin-top: 15px;
    text-align: center;
    img {
      width: 20px;
      height: 20px;
      display: block;
      margin: 0 auto 5px;
    }
  }
}
</style>
